<template>
  <div>
    <h2>class与style绑定</h2>
    <div class="mokuai1">
      <h3 class>v-bind:class 一个对象，以动态地切换 class:</h3>
      <div v-bind:class="{ active: isActive }">v-bind:class</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 指令也可以与普通的 class attribute 共存。</h3>
      <div class="static" v-bind:class="{ active: isActive }">v-bind:class</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class动态切换多个 class</h3>
      <div v-bind:class="{ active: isActive, 'text-danger': hasError }">v-bind:class</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 绑定的数据对象不必内联定义在模板里：</h3>
      <div v-bind:class="classObject">v-bind:class</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 绑定一个返回对象的计算属性。</h3>
      <div v-bind:class="classObject2">v-bind:class</div>
    </div>
    <div class="mokuai1">
      <h3 class>真假条件三目运算</h3>
      <div>{{a>b?"true":"false"}}</div>
      <p v-for="(item,index) in arry" :key="index">{{item}}</p>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 数组传给 v-bind:class，以应用一个 class 列表：</h3>
      <div v-bind:class="[activeClass, errorClass]">数组传给 v-bind:class，</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 如果你也想根据条件切换列表中的 class，可以用三元表达式：</h3>
      <!-- 若isActive 为真,则显示activeClass和errorclass，否则为空和 errorClass-->
      <div :class="[isActive? activeClass : '',errorClass]">三元表达式：</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:class 数组语法中也可以使用对象语法</h3>
      <!-- 若isActive 为真,则显示activeClass和errorclass，否则为空和 errorClass-->
      <div v-bind:class="[{ active: isActive }, errorClass]">数组语法中也可以使用对象语法</div>
    </div>
    <h2>绑定内联样式</h2>
    <div class="mokuai1">
      <h3 class>v-bind:style 对象语法CSS property名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名</h3>
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">对象语法CSS</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:style 直接绑定到一个样式对象</h3>
      <div v-bind:style="styleObject">直接绑定到一个样式对象</div>
    </div>
    <!-- 对象语法常常结合返回对象的计算属性使用 -->
     <div class="mokuai1">
      <h3 class>v-bind:style 数组语法可以将多个样式对象应用到同一个元素上：</h3>
      <div v-bind:style="[baseStyles, overridingStyles]">数组语法</div>
    </div>
    <div class="mokuai1">
      <h3 class>v-bind:style 包含多个值的数组，常用于提供多个带前缀的值</h3>
     <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 5,
      b: 9,
      arry: [
        {
          a: 6
        },
        {
          b: 7
        }
      ],
      isActive: false,
      hasError: true,
      error: {
        value: true,
        type: "fatal"
      },
      classObject: {
        active: true,
        "text-danger": false
      },
      activeClass: "active",
      errorClass: "text-danger",
      activeColor: "red",
      fontSize: 30,
      styleObject: {
        color: "red",
        fontSize: "13px"
      },
      baseStyles:{
           color: "green",
        fontSize: "13px"
      },
       overridingStyles:{
           color: "red",
        fontSize: "18px"
      },
    };
  },
  computed: {
    classObject2() {
      return {
        base: true,
        active: this.isActive && !this.error.value,
        "text-danger": this.error.value && this.error.type === "fatal"
      };
    }
  }
};
</script>

<style>
h2 {
  font-size: 30px;
  color: aqua;
}
.base {
  width: 100px;
  height: 100px;
}

.active {
  background: green;
}

.text-danger {
  background: red;
}
</style>